.reveal_button {
  text-align: left;
  justify-content: start;
  width: 100%;
  --button-ghost-padding-y: 0;
  --button-ghost-padding-x: 0;
}

.reveal_button_inline {
  color: unset !important;
  &:hover {
    background: none;
    cursor: pointer;
    .reveal_text {
      text-decoration: underline;
    }
  }
}

.reveal_text {
  color: var(--accent-a11);
  &:hover {
    text-decoration: underline;
  }
}

.reveal_hidden {
  width: 100%;
  overflow: hidden;
  max-height: 9em;
  mask-image: linear-gradient(
    to bottom,
    var(--color-background) 50%,
    transparent 100%
  );
}

.reveal_hidden_exposed {
  color: var(--accent-11);
  background-color: var(--color-background);
  position: absolute;
  max-height: 6em;
  left: 0;
  bottom: 0;
  height: 100%;
  mask-image: linear-gradient(
    to top,
    var(--color-background) 0%,
    transparent 100%
  );
  &:hover {
    background-color: var(--accent-a3);
  }
}
